<template>
  <div class="question-card">
    <div class="header">
      <!-- 顶部题目基础信息 -->
      <div class="basic mu-background-paper-color mu-text-primary">
        <span v-if="hasId">#{{ question.id }}</span>
        <div class="basic-margin-left">
          <StyleBadge :qstyle="question.style" />
        </div>
        <div v-if="hasStatus" class="basic-margin-left">
          <StatusBadge :status="question.status" />
        </div>
        <span class="basic-margin-left">{{ typeText }}</span>
        <div v-if="hasRatio" class="basic-margin-left card-ratio" :title="buildRatioText(question)">
          <RatioBar :pass="question.pass_count" :fail="question.fail_count" />
        </div>
      </div>
      <mu-divider></mu-divider>
      <!-- 题目题干 -->
      <div class="text mu-primary-color">
        <p>{{ question.text }}</p>
      </div>
    </div>
    <!-- 图片，图片尺寸最大512x340 -->
    <div v-if="question.image" class="image">
      <img :src="imageSrc" :alt="imageAlt" class="image-img">
    </div>
    <!-- 选项 -->
    <ul v-if="question.style === 0" class="option-list">
      <li
        v-for="item in options"
        :key="item.mark"
        v-ri
        class="option-item mu-primary-color"
      >
        <span>{{ item.mark }}</span>
        <span>. </span>
        <span>{{ item.text }}</span>
      </li>
    </ul>
    <!-- 答案 -->
    <mu-alert color="info" class="answer" @click="hideAnswer = false">
      <div v-if="hideAnswer" class="hide-answer">
        <p>答案：点击这里显示答案</p>
      </div>
      <div v-else>
        <p>答案：{{ question.answer }}</p>
      </div>
    </mu-alert>
    <!-- 额外信息卡 -->
    <div class="extra-info">
      <div v-if="hasAuthor" class="info-card">
        <p class="info-card-name">作者</p>
        <p class="info-card-value">{{ question.author.realname }}</p>
      </div>
      <div v-if="hasCreateAt" class="info-card">
        <p class="info-card-name">创建时间</p>
        <p class="info-card-value">{{ toDatetimeString(question.create_at) }}</p>
      </div>
      <div v-if="hasUpdateAt" class="info-card">
        <p class="info-card-name">最后更新</p>
        <p class="info-card-value">{{ toDatetimeString(question.update_at) }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { textToColor } from '@/util/colors'
import { parseTime } from '@/util'
import StyleBadge from './StyleBadge'
import StatusBadge from './StatusBadge'
import RatioBar from './RatioBar'

export default {
  name: 'QuestionCard',
  components: {
    StyleBadge,
    StatusBadge,
    RatioBar
  },
  props: {
    question: {
      type: Object,
      required: true
    },
    clickToShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hideAnswer: this.clickToShow
    }
  },
  computed: {
    ...mapGetters({
      getTypeTextById: 'getTypeTextById'
    }),
    hasId() {
      return this.question.id !== undefined
    },
    hasStatus() {
      return this.question.status !== undefined
    },
    hasRatio() {
      return this.question.pass_count !== undefined && this.question.fail_count !== undefined
    },
    hasAuthor() {
      return this.question.author !== undefined
    },
    hasCreateAt() {
      return this.question.create_at !== undefined
    },
    hasUpdateAt() {
      return this.question.update_at !== undefined
    },
    typeText() {
      return this.getTypeTextById(this.question.type_id)
    },
    color() {
      return textToColor(this.typeText)
    },
    options() {
      const result = []
      for (let i = 0; i < this.question.options.length; i++) {
        const text = this.question.options[i]
        const mark = String.fromCharCode(65 + i)
        result.push({ text, mark })
      }
      return result
    },
    imageSrc() {
      const image = this.question.image
      if (image instanceof File || image instanceof Blob) {
        return URL.createObjectURL(image)
      } else {
        return this.question.image_url
      }
    },
    imageAlt() {
      const image = this.question.image
      if (image instanceof File) {
        return '题目图片'
      } else {
        return '题目图片' + this.question.image
      }
    }
  },
  watch: {
    'question.id'() {
      this.hideAnswer = this.clickToShow
    }
  },
  methods: {
    toDatetimeString(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    },
    buildRatioText(question) {
      const pass = question.pass_count
      const fail = question.fail_count
      const total = pass + fail
      return `${pass} / ${total}`
    }
  }
}
</script>

<style scoped>
.basic {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 6px 16px;
}
.text {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 10px 16px;
  color: #fff;
}
.card-ratio {
  width: 60px;
}
.basic-margin-left {
  margin-left: 6px;
}

.header,
.option-item {
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),
    0 1px 1px 0 rgba(0,0,0,.14),
    0 1px 3px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),
    0 1px 1px 0 rgba(0,0,0,.14),
    0 1px 3px 0 rgba(0,0,0,.12);
}

.image-img {
  display: block;
  margin: 12px auto;
  max-width: 512px;
  max-height: 340px;
}

.option-list {
  margin: 0 auto;
  width: 512px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
}
.option-item {
  margin: 3px 0;
  border-radius: 4px;
  padding: 16px;
  width: calc(50% - 3px);
  word-break: break-all;
  color: #fff;
}
.answer {
  margin-top: 12px;
}

.extra-info {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.info-card {
  display: flex;
  width: 240px;
  margin: 6px 0;
}
.info-card-name {
  box-sizing: border-box;
  text-align: right;
  width: 80px;
  background:#0d47a1;
  padding: 4px 6px;
  border-radius: 4px 0 0 4px;
  color: #fff;
}
.info-card-value {
  box-sizing: border-box;
  text-align: left;
  width: 160px;
  background:#1e88e5;
  padding: 4px 6px;
  border-radius: 0 4px 4px 0;
  color: #fff;
}

.is-phone .image-img {
  width: 100%;
  height: auto;
}
.is-phone .option-list {
  width: 100%;
}
.is-phone .info-card {
  margin: 6px auto;
}
</style>
